{% load fundraising_extras humanize i18n static %}

{% with goal_percent=donated_amount|as_percentage:goal_amount %}
  <div class="fundraising-index" id="donate">

    <div class="fundraising-heart" data-percent="{{ goal_percent }}">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 503 431">
        <switch>
          <g>
            <g transform="translate(4, 2)" id="pixels">
              <path d="M 71 0 L 213 0 L 213 71 L 284 71 L 284 0 L 426 0 L 426 71 L 497 71 L 497 213 L 426 213 L 426 284 L 355 284 L 355 355 L 284 355 L 284 426 L 213 426 L 213 355 L 142 355 L 142 284 L 71 284 L 71 213 L 0 213 L 0 71 L 71 71 L 71 0" fill="#f8f8f8" stroke="#c0c0c0" stroke-width="1" />
            </g>
            <text x="50%" y="43%" alignment-baseline="middle" text-anchor="middle">{{ goal_percent|floatformat:'0' }}%</text>
          </g>
          <foreignObject>
            <img src="{% static 'img/fundraising-heart.svg' %}" />
          </foreignObject>
        </switch>
      </svg>
    </div>

    <div class="description">
      <ul>
        <li><strong>{% blocktranslate trimmed %}{{ goal_percent }}% funded{% endblocktranslate %}</strong></li>
        <li>
          {% blocktranslate trimmed with amount=donated_amount|intcomma goal=goal_amount|intcomma start_date=goal_start_date|date:"Y" %}
            <strong>${{ amount }} donated</strong> of US&nbsp;${{ goal }} goal for {{ start_date }}
          {% endblocktranslate %}
        </li>
        <li>
          {% url 'members:corporate-members-join' as corp_join_url %}
          {% blocktranslate trimmed %}
            Companies able to make a <strong>larger donation</strong>
            ($2,000+/year) are invited to apply to be Corporate Members
            <a href="{{ corp_join_url }}">here</a>.
          {% endblocktranslate %}
        </li>
      </ul>

      <div class="donate">
        <form
          method="post"
          class="stripe-donation"
          action-for-donation-session="{% url "fundraising:donation-session" %}"
          data-stripe-key="{{ stripe_publishable_key }}"
          data-stripe-icon="{% static 'img/dj-stripe-icon.jpg' %}"
          data-is-logged-in="{{ user.is_authenticated }}"
          data-login-url="{% url 'login' %}">
          {% csrf_token %}
          <h3>{% translate "Help us make it happen:" %}</h3>
          {{ form.interval }}
          {{ form.amount }}
          <div class="custom-donation">
            <span class="prefix">US $ ({% translate "integer only" context "Donation amount in US dollars" %})</span>
          </div>
          {{ form.captcha }}
          <input id="donate-button" type="submit" value="{% translate "Donate monthly" %}" class="cta" />
        </form>
      </div>
    </div>
    <div class="cls"></div>
    <p class="footnote">
      {% blocktranslate trimmed with amount=display_logo_amount|intcomma %}
        Your logo will be visible below if you contribute at least
        US&nbsp;${{ amount }}.<br>
      {% endblocktranslate %}
    </p>
  </div>
{% endwith %}

<hr style="margin: 40px 0" />

<script async src="{% static "js/fundraising-heart.js" %}"></script>
